<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/head :: htmlhead">
<body>
<style>
    .layui-layer-content {
        overflow: visible !important;
        margin: -10px;
    }
</style>
<div class="layui-fluid">
    <div class="site-text" style="margin: 5%; display: none" id="window">
        <div class="layui-form" action="" lay-filter="addform">
            <div class="layui-row layui-col-space10 layui-form-item">
                <div class="layui-col-lg12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">封面图片：</label>

                        <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="upload_pic">上传封面图片</button>
                            <input type="hidden" id="picid" name="picid" value="0">
                        </div>
                    </div>
                    <div class="layui-col-lg12">
                        <label class="layui-form-label">选择新闻：</label>
                        <div class="layui-input-block">
                            <select id="content" name="content">
                                <option th:each="content,userStat:${contentList}" th:value="${content.id}" th:text="${content.title}"></option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">前台轮播图片</div>
                <div class="layui-card-body">
                    <table id="demo" lay-filter="demo" style="margin-left: 15px"></table>
                    <script type="text/html" id="table_toolbar">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="addpic">添加图片</button>
                        </div>
                    </script>
                    <script type="text/html" id="table_operate">
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">

    function hidePath(data) {
        return "查看图片";
    }

    layui.use(['table', 'element', 'form', 'upload'], function () {
        var table = layui.table
            , element = layui.element
            , form = layui.form
            , upload = layui.upload;


        //第一个实例
        table.render({
            elem: '#demo'
            , url: '/datacover' //数据接口
            , method: 'post'
            , toolbar: '#table_toolbar'
            , defaultToolbar: ['filter', 'print']
            , cellMinWidth: 80
            , page: true //开启分页
            , cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', hide: true, sort: true}
                    , {field: 'title', title: '文章题目', sort: true, fixed: 'left', width: 500}
                    , {
                    field: 'pic',
                    title: '图片地址',
                    sort: true,
                    event: 'showCover',
                    style: 'cursor: pointer; color: blue',
                    templet: hidePath}
                    , {field: 'right', title: '操作', toolbar: '#table_operate', width: 200}
                ]
            ]
        });


        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除？', function (index) {
                    $.ajax({
                        url: "/delcover",
                        async: false,
                        type: "POST",
                        dataType: "text",
                        data: {"coverId": data.id},
                        success: function (aa) {
                            if (aa === "error") {
                                layer.msg('删除失败！', {icon: 2});
                                location.reload()
                            } else if (aa === "success") {
                                layer.msg('删除成功！', {icon: 1});
                                obj.del();
                                layer.close(index);
                            }
                        }
                    });
                });
            }
            if (obj.event === 'showCover') {
                var coverId = data.id;
                var picPath = data.pic;
                window.open(picPath, '图片预览');
            }
        });

        upload.render({
            elem: '#upload_pic'
            ,accept: 'images'
            ,url: '/upload_cover'
            ,done: function(res){
                if(res.data==="fileTypeError"){
                    layer.msg('文件类型错误！', {icon: 2});

                }else if(res.data==="fileTypeError"){
                    layer.msg('文件已存在！', {icon: 2});

                }else if(res.data==="Error"){
                    layer.msg('上传文件失败！', {icon: 2});

                }else{
                    layer.msg('上传文件成功！', {icon: 1});
                    $('#picid').val(res.data);
                }
            }
        });

        table.on('toolbar(demo)', function (obj) {
            if (obj.event === 'addpic') {
                layer.open({
                    type: 1
                    , skin: 'layui-layer-molv'
                    , area: ['400px', '200px']
                    , title: ['添加图片', 'font-size:18px']
                    , btn: ['添加', '取消']
                    , shadeClose: true
                    , shade: 0 //遮罩透明度
                    , maxmin: true //允许全屏最小化
                    , content: $("#window")  //弹窗路径
                    , success: function (layero, index) {
                        form.render(null, 'addform');
                    }
                    , yes: function (index, layero) {
                        var picid = $("#picid").val();
                        if(picid=="0"){
                            layer.msg('请上传封面图片！', {icon: 2});
                        }else{
                            var data = {};
                            data['pic'] = picid;
                            data['contentid'] = $("#content").val();
                            $.ajax({
                                url: "/addcover",
                                async: false,
                                type: "POST",
                                contentType: "application/json",
                                data: JSON.stringify(data),
                                success: function (aa) {
                                    if (aa === "success") {
                                        layer.msg('添加封面图片成功！', {icon: 1});

                                        location.reload();
                                    } else {
                                        layer.msg('添加失败！', {icon: 2});
                                    }
                                }
                            });
                        }
                    }
                    , btn2: function (index, layero) {
                        layer.close(index); // 关闭弹出层
                    }
                });
            }
        });

    });

</script>
</body>
</html>